<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="border: 1px solid black;">
		<img src="1.jpg"  style="opacity: 0;" id="img1">
		</div>
		
		<script type="text/javascript">
			var a = 0;
			var t;
			function show()
			{
				a++;
				img1.style.opacity = a /100;
				if(a<100)
				{
					t = setTimeout(show,10);
				}
			}
			function hide()
			{
				a--;
				img1.style.opacity = a /100;
				if(a<100)
				{
					t = setTimeout(hide,10);
				}
			}
			img1.onmouseover = function(){
				clearTimeout(t);
				a = 0;
				show();
			};
			img1.onmouseout = function()
			{
				clearTimeout(t);
				a = 100;
				hide();
			}
			
			
		</script>
		
	</body>
</html>
